<template>
  <div style="margin-top: 10px">
    <el-row>
      <el-col :span="24">
        <div style="font-size: 80px; text-shadow: 0 0 10px black;
        color: white; text-align: center; background-color: #4686fc;
        border: 3px solid black">
          易下天梯榜<span style="color: red">❤</span>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 50px">
      <div id="Columnar" style="width: 1200px; height: 600px"></div>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 50px">
      <div id="Columnar1" style="width: 1200px; height: 600px"></div>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 50px">
      <div id="Columnar2" style="width: 1200px; height: 600px"></div>
    </el-row>
  </div>
</template>


<script>
import * as echarts from 'echarts';
export default {
  name: "FileRank",
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {
    this.loadData1();
  },
  methods: {
    loadData1() {
      // 软件荣誉天梯
      let option = {
        title: {
          text: '软件荣誉天梯',
          subtext: '优秀的软件改变世界！'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      let chartDom = document.getElementById('Columnar');
      let myChart = echarts.init(chartDom);
      // 获取全类型中的最高下载榜单
      this.request.get("/u/pageByType", {
        params: {
          pageNum: 1,
          pageSize: 12,
          fileType: ""
        }
      }).then(res => {
        let nickNames = res.data.records.map(v => v.nickName);
        let downloadNums = res.data.records.map(v => v.downloadNum);
        option.xAxis.data = nickNames;
        option.series[0].data = downloadNums;

        option && myChart.setOption(option);
        this.loadData2();
      })
    },
    loadData2() {
      // 电脑荣誉天梯
      let option1 = {
        title: {
          text: '电脑软件荣誉天梯',
          subtext: '优秀的软件改变世界！'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      let chartDom1 = document.getElementById('Columnar1');
      let myChart1 = echarts.init(chartDom1);
      // 获取电脑软件中的最高下载榜单
      this.request.get("/u/pageByType", {
        params: {
          pageNum: 1,
          pageSize: 12,
          fileType: "电脑软件"
        }
      }).then(res => {
        let nickNames = res.data.records.map(v => v.nickName);
        let downloadNums = res.data.records.map(v => v.downloadNum);
        option1.xAxis.data = nickNames;
        option1.series[0].data = downloadNums;

        option1 && myChart1.setOption(option1);
        this.loadData3();
      })
    },
    loadData3() {
      // 安卓荣誉天梯
      let option2 = {
        title: {
          text: '安卓软件荣誉天梯',
          subtext: '优秀的软件改变世界！'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      let chartDom2 = document.getElementById('Columnar2');
      let myChart2 = echarts.init(chartDom2);
      // 获取安卓软件中的最高下载榜单
      this.request.get("/u/pageByType", {
        params: {
          pageNum: 1,
          pageSize: 12,
          fileType: "安卓软件"
        }
      }).then(res => {
        let nickNames = res.data.records.map(v => v.nickName);
        let downloadNums = res.data.records.map(v => v.downloadNum);
        option2.xAxis.data = nickNames;
        option2.series[0].data = downloadNums;

        option2 && myChart2.setOption(option2);
      })
    }
  }
}
</script>

<style scoped>

</style>
